<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/layui-util/css/layui.css" type="text/css">
    <script src="/js/laypage/laypage.js" charset="utf-8"></script>
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/vue/vue.min.js"></script>
    <script type="text/javascript" src="/layui-util/layui.all.js"></script>
    <script type="text/javascript" src="/layui-util/layui.js"></script>
    <script src="/js/layer/layer.js" charset="utf-8"></script>


</head>
<style>
    .main-one{
        width: 800px;
        height: 300px;
        margin-left: 528px;
        margin-outside: 10px;
        margin-right: auto;


    }
    .layui-icon{
        font-size: 28px;
    }
    .main-top{
        width: 100%;
        height: 14%;
        margin-outside: 10px;
        margin-right: auto;
        font-size: 28px

    }
    .layui-carousel{
        background-color: ;
        width: 1280px;
        height: 790px;
        margin-left: 200px

    }







</style>

<body>
<script src="/js/webSocket.js"></script>
<section id="container">
<#include "sider.ftl">
   <section id="main-content">
        <section class="wrapper" id="app">
            <form action="/count/toCountAfter" method="post" id="biaodan">
              <div class="main-one" >
                    <div class="main-top"  ><i class="layui-icon layui-icon-auz" ></i>为您测算出的简易报价为：
                       <span ><i class="layui-icon layui-icon-rmb"></i>
                               <td> {{result}}</td>
                       <b>.</b>00起
                       </span>
                        <a style=" margin-left: 60px;" class="layui-btn"  id="baojia"  type="button">快速报价</a>
                    </div>

                   <div class="main-three" >
                       <b><select name="fangan" lay-verify="required" id="fangan" style="width: 179px;height: 42px;font-size: 20px;">
                           <option value="0"  selected = "selected" class="buuIdClass">——请选择——</option>
                           <option value="1"   class="buuIdClass">基本方案</option>
                           <option value="2" class="buuIdClass">性价比高方案</option>
                           <option value="3" class="buuIdClass">周全保障方案</option>
                       </select></b>
                   </div>
                    <div style="width: 100%; height: 30px;font-size:20px;margin-top: 20px" >

                          <table>
                              <ul v-for="(item,index) in result1" style="float:left;">
                                  <li>
                                      <b class="b1">{{item.insurname}}&nbsp;&nbsp;&nbsp;</b>
                                  </li>
                              </ul>
                          </table>

                    </div>
                   <div  style="top: 210px; width: 100%;height: 138px;margin-top: 10px ">
                        1. 上一个年度未发生有责任道路交通事故-10%<br>
                        2 .上两个年度未发生有责任道路交通事故-20%&nbsp;<br>
                        3 .上三个及以上年度未发生有责任道路交通事故-30%<br>
                        4 .上一个年度发生一次有责任不涉及死亡的道路交通事故0%<br>
                        5 .上一个年度发生两次及两次以上有责任道路交通事故10%&nbsp;<br>
                        6 .上一个年度发生有责任道路交通死亡事故30%
                    </div>

            </form>
               </div>
               <div class="layui-carousel" id="test1"   >
                   <div carousel-item>
                       <div><img src="/images/counts/claimsSuperiority.jpg" height="786" width="1280"  ></div>
                       <div><img src="/images/counts/InsurProcess.jpg" height="772" width="1280"></div>
                   </div>
               </div>
        </section>
       <#include "foot.ftl"><#--引入底部-->
   </section>
</section>
</body>
</html>
<script >
    var app = new Vue({
        el: "#app",
        data: {
            result:0,
            result1:[]
        }
    });

    layui.use('carousel', function(){
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            ,width: '1280px' //设置容器宽度
            ,height: '790px'
            ,arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });
    });


$("#baojia").click(function () {
    $.ajax({
        type:"POST",
        dataType:"JSON",
        url:"/count/toCountAfter",
        data:{
            fangan:$("#fangan").find("option[class='buuIdClass']:selected").val()
        },
        success:function (data) {
           app.result=data.num;
           app.result1=data.insurcateList;
        }
    })
});
</script>



